import React from 'react'
import './ScrollPage.scss';
import { LeftOutlined } from '@ant-design/icons';
import { InfiniteScroll, PullToRefresh } from 'antd-mobile';
import { Utils } from '../../utils/utils';




interface IProps {
    style?: React.CSSProperties;
    headerSlot?: JSX.Element,
    contentSlot?: JSX.Element,
    footerSlot?: JSX.Element,
    children?: JSX.Element,
    /** 是否显示默认头部 */
    showDefaultHeader?: boolean,
    /** 标题 */
    label?: string,
    /** 加载更多的回调函数 */
    loadMore?: (isRetry: boolean) => Promise<void>,
    /** 是否有更多数据 */
    hasMore?: boolean,
    /** 显示加载更多 */
    showLoadMore?: boolean,
    /** 是否显示返回按钮 */
    backIcon?: React.ReactNode,
    /** 头部后部分 */
    headerAfter?: React.ReactNode,
    /** 返回回调 */
    onBack?: (...args: any[]) => void,
    /** 下拉回调 */
    onRefresh?: () => Promise<void>,
}
/** 滚动页面，一般手机端使用 */
const ScrollPage = React.forwardRef<any, IProps>((props, ref) => {
    //  暴露 属性 和 方法
    React.useImperativeHandle(ref, () => ({
        header: {
            ref: headerRef,
            height: headerRef?.current?.offsetHeight || 0
        },
        content: {
            ref: contentRef,
        },
        footer: {
            ref: footerRef,
        },
        scrollTo,
    }), []);

    const { headerSlot = <></>, contentSlot = <></>, footerSlot = <></>, children = <></>,
        style = {}, showDefaultHeader = true, label = '', loadMore = async () => { }, hasMore = true, showLoadMore = false,
        backIcon = <LeftOutlined />, headerAfter = <></>, onBack = () => { }, onRefresh } = props;

    const headerRef = React.useRef<HTMLDivElement>(null);
    const contentRef = React.useRef<HTMLDivElement>(null);
    const footerRef = React.useRef<HTMLDivElement>(null);

    const scrollTo = (y: number) => {
        const ele = contentRef.current;
        if (ele === null) {
            return;
        }
        setTimeout(() => {
            ele.scroll(0, y);
        }, 50);
    }

    React.useEffect(() => {
        window.addEventListener('popstate', function (_event) {
            // 处理返回事件
            // alert('页面返回事件被触发');
            // 可以在这里执行页面后退的逻辑
            onBack();
        }, { once: true });
    }, []);

    /** 返回 */
    const back = (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
        e.stopPropagation();
        onBack();
    }
    /** 是否显示返回按钮 */
    const [showBack, _setShowBack] = React.useState<boolean>(false);
    /** 下拉回调 */
    const onPullDownRefresh = async () => {
        await Utils.sleep(500);
        if (onRefresh) {
            await onRefresh();
        }
    }

    return (
        <div className={'scroll-page-component'} style={style}>
            <div ref={headerRef} className={'header'}>
                {
                    showDefaultHeader && (
                        <div className={'default-header'}>
                            {
                                label && <div className={'label'}>{label}</div>
                            }
                            <div className={'before'}>
                                {/* 返回按钮 */}
                                {
                                    showBack && <div className={'back'} onClick={(e) => back(e)}>
                                        {backIcon}
                                    </div>
                                }
                            </div>
                            <div className={'after'}>
                                {headerAfter}
                            </div>
                        </div>
                    )
                }
                {headerSlot}
            </div>
            <div ref={contentRef} className={'content'}>
                {
                    onRefresh ? <PullToRefresh onRefresh={onPullDownRefresh}>
                        {children}{contentSlot}
                    </PullToRefresh> : <>{children}{contentSlot}</>
                }
                {
                    showLoadMore && <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
                }
            </div>
            <div ref={footerRef} className={'footer'}>
                {footerSlot}
            </div>
        </div>
    )
})


export default ScrollPage;